<!--  -->
<template>
  <div>
    <section>
        <v-parallax :src="parallaxSrc" :height="height">
          <v-layout
            column
            align-center
            justify-center
            class="white--text"
          >
            <div class="display-4">{{VUE_APP_TITLE}}</div>
            <!-- <img :src="logoSrc" alt="Fortuna"  class="mt-4" height="420"> -->
            <div class="title">Powered by {{VUE_APP_COMPANY_NAME}}</div>
            <v-btn
              class="primary mt-5"
              dark
              large
            >
              关于
            </v-btn>
          </v-layout>
        </v-parallax>
      </section>
      <section>
        <v-container style="padding:200px 0 200px 0;">
          <v-row justify="center" >
            <v-col cols="12">
              <div class="text-center">
                <h2 class="headline">{{VUE_APP_COMPANY_NAME}}</h2>
                <span class="subheading">
                  技术时代  引领未来
                </span>
              </div>
            </v-col>
            <v-col cols="12" sm="3">
              <v-card class="elevation-0 transparent">
                <v-card-text class="text-center">
                  <v-icon x-large class="primary--text">color_lens</v-icon>
                  <p class="headline text-center">Desgin</p>
                  <p>专业设计</p>
                </v-card-text>
              </v-card>
            </v-col>
            <v-col cols="12" sm="3">
              <v-card class="elevation-0 transparent">
                <v-card-text class="text-center">
                  <v-icon x-large class="primary--text">flash_on</v-icon>
                  <p class="headline">Development</p>
                  <p>快速开发</p>
                </v-card-text>
              </v-card>
            </v-col>
            <v-col cols="12" sm="3">
              <v-card class="elevation-0 transparent">
                <v-card-text class="text-center">
                  <v-icon x-large class="primary--text">build</v-icon>
                  <p class="headline text-center">Maintenance</p>
                  <p>持续维护</p>
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </section>

      <section>
        <v-container style="padding:100px 0 200px 0;">
          <v-row justify="center">
            <v-col cols="12" class="text-center">
              <div class="text-center">
                <h2 class="headline">作品展示</h2>
                <span class="subheading">
                  技术时代  引领未来
                </span>
              </div>
            </v-col>
            <v-col cols="12" sm="2">
              <v-card class="transparent" flat>
                <v-card-title></v-card-title>
                <v-card-text class="text-center"><h2>大数据云平台</h2></v-card-text>
                <v-img class="white--text align-end" height="200px" src="https://picsum.photos/200/200"></v-img>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn class="primary" large>Demo</v-btn>
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-card>
            </v-col>
            <v-col cols="12" sm="2">
              <v-card class="transparent" flat>
                <v-card-title></v-card-title>
                <v-card-text class="text-center"><h2>信息管理系统</h2></v-card-text>
                <v-img class="white--text align-end" height="200px" src="https://picsum.photos/200/200"></v-img>
                <v-card-actions class="text-center">
                  <v-spacer></v-spacer>
                  <v-btn class="primary" large>Demo</v-btn>
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-card>
            </v-col>
            <v-col cols="12" sm="2">
              <v-card class="transparent" flat>
                <v-card-title></v-card-title>
                <v-card-text class="text-center"><h2>智能社区</h2></v-card-text>
                <v-img class="white--text align-end" height="200px" src="https://picsum.photos/200/200"></v-img>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn class="primary" large>Demo</v-btn>
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-card>
            </v-col>
            <v-col cols="12" sm="2">
              <v-card class="transparent" flat>
                <v-card-title></v-card-title>
                <v-card-text class="text-center"><h2>党建平台</h2></v-card-text>
                <v-img class="white--text align-end" height="200px" src="https://picsum.photos/200/200"></v-img>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn class="primary" large>Demo</v-btn>
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </section>

      <section>
        <v-parallax src="" height="380">
          <v-layout column align-center justify-center>
            <div class="headline black--text">Web development has never been easier</div>
            <em class="black--text">Kick-start your application today</em>
            <v-btn
              class="primary mt-5"
              large
              href="###"
            >
              加入我们
            </v-btn>
          </v-layout>
        </v-parallax>
      </section>

      <section>
        <v-container grid-list-xl>
          <v-layout row wrap justify-center>
            <v-flex xs12 sm4>
              <v-card class="elevation-0 transparent">
                <v-card-title primary-title class="layout justify-center">
                  <div class="headline">关于我们</div>
                </v-card-title>
                <v-card-text>
                  Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
                  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                  Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
                </v-card-text>
              </v-card>
            </v-flex>
            <v-flex xs12 sm4 offset-sm1>
              <v-card class="elevation-0 transparent">
                <v-card-title primary-title class="layout justify-center">
                  <div class="headline">联系方式</div>
                </v-card-title>
                <v-card-text>
                  Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
                </v-card-text>
                <v-list class="transparent">
                  <v-list-item>
                    <v-list-item-action>
                      <v-icon class="primary--text text--lighten-2">phone</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                      <v-list-item-title>18600911597</v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                  <v-list-item>
                    <v-list-item-action>
                      <v-icon class="primary--text text--lighten-2">place</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                      <v-list-item-title>山西省, 太原市</v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                  <v-list-item>
                    <v-list-item-action>
                      <v-icon class="primary--text text--lighten-2">email</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                      <v-list-item-title>makeup1123@163.com</v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </v-list>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </section>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data: function () {
    return {
      parallaxSrc: 'https://picsum.photos/1920/1080',
      logoSrc: require('@/assets/logo.png')
    }
  },
  created: function () {

  },
  components: {},
  computed: {
    height: function() {
      return (window.innerHeight)
    }
  },
  methods: {}
}
</script>
<style scoped>
</style>
